import React, { Component } from 'react'
import { NavBar, Image, Item, InputNumber, Icon } from 'components'

export default class CustomerService extends Component<any, any> {

    public render(): JSX.Element {
        const { returnDetail } = this.props
        return (
            <div className="customerService">
                <NavBar title={<div style={{ fontSize: '0.97rem', color: '#222' }}>选择售后类型</div>} fixed={true} />
                <div className="customerService_goodsWrap">
                    <div className="customerService_goodsWrap_goodsImg">
                        <Image src={returnDetail.pic} />
                    </div>
                    <div className="customerService_goodsWrap_goodsInfo">
                        <div className="customerService_goodsWrap_goodsTitle">
                            {returnDetail.short_title}
                        </div>
                        <div className="customerService_goodsWrap_goodsSpec">
                            <div>单价：<span className="DINPro" style={{ color: '#222', fontSize: '0.8rem' }}>￥{returnDetail.price}+{returnDetail.price_q}</span></div>
                            <div>购买数量：<span className="DINPro" style={{ color: '#222', fontSize: '0.8rem' }}>{returnDetail.number}</span></div>
                        </div>
                    </div>
                </div>
                <div className="customerService_number">
                    <Item
                        className="customerService_number_item"
                        title={<div className="customerService_number_item_title">申请数量</div>}
                        value={<div><InputNumber value={returnDetail.number} min={1} max={returnDetail.reNumber || returnDetail.number} onChange={this.handleChange} /></div>}
                    />
                </div>
                <div className="customerService_selectWrap">
                    <Item
                        onPress={() => { this.goToUrl('/My/customerServiceDetail/') }}
                        className="customerService_selectWrap_item"
                        title={<div className="customerService_selectWrap_title"><Icon type="returnPolicy" className="customerService_selectWrap_title_return" /><span>退货</span></div>}
                        value={<div className="customerService_selectWrap_value">已收货，需要退回该商品<Icon type="arrow_right" /></div>}
                    />
                    <Item
                        onPress={() => { this.goToUrl('/My/barterDetail/') }}
                        className="customerService_selectWrap_item"
                        title={<div className="customerService_selectWrap_title"><Icon type="changeGoods" className="customerService_selectWrap_title_change" /><span>换货</span></div>}
                        value={<div className="customerService_selectWrap_value">已收到货，需要更换已收到的商品<Icon type="arrow_right" /></div>}
                    />
                </div>
            </div>
        )
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }
    private handleChange = (val: any) => {
        const { returnDetail, SET_USER_RETURN_DETAIL } = this.props
        const data = { ...returnDetail }
        data.reNumber = val
        SET_USER_RETURN_DETAIL(data)
    }
}